
<template >
 <el-card class="box-card">
    <div slot="header" style="text-align:left">
    
     </div>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" >
  <el-form-item label="种苗名称" prop="seedName">
    <el-input v-model="ruleForm.seedName"></el-input>
  </el-form-item>
   <el-form-item label="批次号" prop="batchNo">
    <el-input v-model="ruleForm.batchNo"></el-input>
  </el-form-item>

  <el-form-item label="作物" prop="crop">
        <el-select v-model="ruleForm.crop" placeholder="请选择">
          <el-option
            v-for="item in crops"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
  </el-form-item>
    <el-form-item label="来源" prop="seedSource">
        <el-select v-model="ruleForm.seedSource" placeholder="请选择">
          <el-option value="自购" lable="自购"></el-option>
           <el-option value="栽培" lable="栽培"></el-option>
            <el-option value="野生" lable="野生"></el-option>
        </el-select>
  </el-form-item>
  <el-form-item label="种苗图片" prop="fileUpload">
     <uploadImage :maxSize=3 :maxNum=1 v-model="ruleForm.fileUpload" />
  </el-form-item>
   <el-form-item label="种苗数量" prop="seedNum">
    <el-input-number v-model="ruleForm.seedNum"  :min="1" :max="1000" ></el-input-number>
  </el-form-item>
   <el-form-item label="种植人" prop="grower">
    <el-input v-model="ruleForm.grower"></el-input>
  </el-form-item>
   <el-form-item label="种植地块" prop="farmId">
        <el-select v-model="ruleForm.farmId" placeholder="请选择">
          <el-option
            v-for="item in farms" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
   </el-form-item>

  <el-form-item label="种植面积" prop="acreage">
    <el-input placeholder="面积" v-model="ruleForm.acreage">
          <template slot="append">亩</template>
      </el-input>
  </el-form-item>
    <el-form-item label="种植时间" prop="plantDate">
        <el-date-picker  v-model="ruleForm.plantDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
 <el-form-item label="预计收获时间" prop="harvestDate">
        <el-date-picker  v-model="ruleForm.harvestDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="产地描述" prop="produceArea">
          <el-input v-model="ruleForm.produceArea" type="textarea" :rows="3"></el-input>
    </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>
</el-form>
 </el-card>
</template>


<script>

import { farmList ,plantAdd,plantLoad} from "@/libs/api.js"; 
import uploadImage from "@/components/upload/UploadImage.vue";
  export default {
    components: {
        uploadImage
    },
    data() {
      return {
        ruleForm: {
             seedNum:1,
             fileUpload:[]
        },
        rules: {},
        crops: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        farms:[]
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
                    let param = new FormData();
                    //封装第一步数据
                    for (var key in this.ruleForm) {
                        param.append(key, this.ruleForm[key]);
                    }
                    param.append("file", this.ruleForm.fileUpload[0].raw);
                    plantAdd(param).then(res => {
                        this.$util.success();
                    });
           
          } else {
            return false;
          }
        });
      },
    },
    created(){
      this.rules=this.$util.getRule(["seedSource","seedName","crop","batchNo","seedNum","grower","farmId","acreage","plantDate","harvestDate","produceArea"]);
      this.rules["acreage"].push( {
            pattern: /^[1-9]\d*$|^[0-9]+(.[0-9]{1,2})?$/,
            message: '请输入正确的面积量',
            trigger: 'blur'
       });
    },
    mounted() {
 
      farmList().then((res)=>{
         this.farms=res;
      });
       if(this.$route.query.id){
           plantLoad(this.$route.query.id).then((res) => {
             res.fileUpload=[];
                this.ruleForm=res;
                 var file = {
                        name: res.seedImage,
                        url: this.$http.baseUrl + "/file/qiniu/" + res.seedImage,
                        status:"success"
                };
                this.ruleForm.fileUpload.push(file);
            })
       }
    }
  }
</script>



